<template>
	<view>
		<view class="autoview-clz">
			<view class="autoview-back">
				<u-icon class="autoview-icon" name="arrow-left" color="#9E6876" size="36" @click="backToPreviousPage()"></u-icon>
				<text class="autoview-title">Employee Evaluation</text>
			</view>
			
			<view class="autoview-1">
				<view class="autoview-name">
					<text class="name">{{staffname}}</text>
				</view>
				<view class="autoview-time">
					<text class="time">{{created_at}}</text>
				</view>
				
				<view class="autoview-rate">
					<text class="rate-title">Service attitude:</text>
					<u-rate :count="attitudeCount" v-model="attitudeValue" active-color="rgb(250 179 102)" size="64" disabled></u-rate>
				</view>
				<view class="autoview-rate">
					<text class="rate-title">Service quality:</text>
					<u-rate :count="qualityCount" v-model="qualityValue"  active-color="rgb(250 179 102)" size="64" disabled></u-rate>
				</view>
				<view class="autoview-rate">
					<text class="rate-title">Environment:</text>
					<u-rate :count="environmentCount" v-model="environmentValue" active-color="rgb(250 179 102)" size="64" disabled></u-rate>
				</view>
				
			</view>
			
			<view class="autoview-2">
				<view class="autoview-rate">
					<text class="comment-title">Comment:</text>
				</view>
				<view class="autoview-rate">
					<text class="comment-content">
						{{comment}}
					</text>
				</view>
			</view>
			
			<view class="autoview-3">
				<view class="autoview-customer">
					<text class="customer-title">Customer Name:</text>
					<text class="customer-content">{{username}}</text>
				</view>
				<u-line class="custom-line" length="90%" margin="0rpx 40rpx 0rpx 40rpx "></u-line>
				<view class="autoview-customer1">
					<text class="customer-title">Phone number:</text>
					<text class="customer-content">{{phone}}</text>
				</view>
			</view>
			
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id : '',
				staffname:'',
				attitudeCount: 0, 
				attitudeValue: 0,
				qualityCount: 0 ,
				qualityValue: 0,
				environmentCount:0,
				environmentValue: 0,
				comment:'',
				username:'',
				phone:'',
				created_at:''
			}
		},
		onLoad(options) {  
		    // 页面加载时，从URL参数中获取id  
		    this.id = options.id;  
			this.getInfo(this.id)
		  },  
		methods: {
			backToPreviousPage() {  
			    // 默认返回上一页，也可以指定返回多级页面  
			    uni.switchTab({
			      url: '/pages/index/index'
			    }); 
			  } ,
			getInfo(id){
				
				 this.$api.getEvaluateInfo({id:id}).then(res => {
					 const data = res.data.data
					 this.staffname = data.staffname
					 this.attitudeCount = data.attitude
					 this.attitudeValue = data.attitude
					 this.qualityCount = data.quality
					 this.qualityValue = data.quality
					 this.environmentCount = data.environment
					 this.environmentValue = data.environment
					this.comment = data.feedback
					this.username = data.username
					this.phone = data.phone
					this.created_at = data.created_at
				 })
			}
		}
	}
</script>

<style>
	
@font-face {
	    font-family: 'Roboto';  
	    src: url('../../static/fonts/Roboto-Black-1.ttf') format('truetype');  
	} 
	.content{
		background-color: #F0F0F0;
		height:auto;
		z-index: 0;
	}
	.autoview-clz{
		padding-top: 106rpx;  
		background-size: contain;
		background-image: url('../../static/image/backimg.png');
		height: 412rpx;
		font-family: Roboto;
		font-size: 24px;
		color: #333333;	
	}
	
	.autoview-back{
		display: flex; /* 使用flex布局使子元素并排显示 */  
		align-items: center; /* 垂直居中 */  
	}
	
	.autoview-icon{
		margin-left: 40rpx;
		margin-right: 40rpx;
		width: 18rpx;
		height: 32rpx;
	}
	.autoview-title{
		font-family: Roboto;
		font-size: 16px;
		color: #333333;
	}
	
	.autoview-1{
		margin-left: 24rpx;
		margin-top: 72rpx;
		width: 702rpx;
		height: 508rpx;
		background: linear-gradient( 180deg, #FAC8D5 0%, #FFFFFF 100%), #FFFFFF;
		box-shadow: 0px 2px 24px 0px rgba(125,39,62,0.16);
		border-radius: 24rpx;
		backdrop-filter: blur(4.923076923076923px);
		
	}
	.autoview-name{
		padding-top: 48rpx;
		font-family: Roboto, Roboto;
		font-weight: bold;
		font-size: 56rpx;
		color: #80545F;
		text-align: center;
		font-style: normal;
	}
	.autoview-time{
		padding-top: 16rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #9E6876;
		text-align: center;
		font-style: normal;
	}
	.autoview-rate{
		display: flex; /* 启用Flexbox */
		align-items: center; /* 水平居中子元素 */ 
		padding-top: 32rpx;
	}
	
	.rate-title{
		width: 212rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 13px;
		color: #333333;
		line-height: 15px;
		text-align: right;
		font-style: normal;
	}
	.comment-content{
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-bottom: 24rpx;
		font-family: Roboto, Roboto;
		font-weight: 500;
		font-size: 16px;
		color: #333333;
		line-height: 24px;
		text-align: left;
		font-style: normal;
	}
	
	.autoview-2{
		margin-left: 24rpx;
		margin-top: 72rpx;
		width: 702rpx;
		min-height: 212rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
	}
	
	.comment-title{
		margin-left: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 13px;
		color: #333333;
		line-height: 15px;
		text-align: right;
		font-style: normal;
	}
	.autoview-3{
		margin-left: 24rpx;
		margin-top: 72rpx;
		width: 702rpx;
		height: 256rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
	}
	.autoview-customer{
		display: flex; /* 启用Flexbox */
		align-items: center; /* 水平居中子元素 */ 
		justify-content: space-between;
		padding-top: 32rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-bottom: 36rpx;
	}
	
	.autoview-customer1{
		display: flex; /* 启用Flexbox */
		align-items: center; /* 水平居中子元素 */ 
		justify-content: space-between;
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-bottom: 36rpx;
	}
	.customer-title{
		padding-top: 38rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 16px;
		color: #666666;
		line-height: 16px;
		text-align: left;
		font-style: normal;
	}
	.customer-content{
		padding-top: 38rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 800;
		font-size: 16px;
		color: #666666;
		line-height: 16px;
		text-align: right;
		font-style: normal;
	}
	
	
</style>
